/**
* @作者:晋尧
* @创建时间：2021/7/21
* @修改时间：2021/7/22
*/

<template>
	<view class="main">
		<!-- 顶部导航栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 176rpx; height: 99rpx;" fit="cover" class="logo"
				@click="jumpToMain">
				<!-- 导航栏元素 -->
			<view class="navitems">
				<view class="navitem" @click="jumpToUserLogin">用户登录</view>
				<view @click="jumpToShopLogin" class="navitem">厂商登录</view>
			</view>
		</view>
		<!-- 网页内容 -->
		<view class="content">
			<!-- 网页图片 -->
			<view class="image_container">
				<view class="image_box">
					<img src="/static/image/login2.png" class="image" />
				</view>
			</view>
			<!-- 登陆框 -->
			<view class="login_container">
				<view class="login_box">
					<view class="loginName">
						<h2 style="text-align: center">管理员登录</h2>
					</view>
					<view class="login">

						<view class="userMobile">
							<p class="tips">管理员账号：</p>
							<el-input v-model="adminName" placeholder="请输入账号"></el-input>
						</view>
						<view class="userPassword">
							<p class="tips">密码：</p>
							<el-input placeholder="请输入密码" v-model="adminPassword" size="large" show-password>
							</el-input>
						</view>
						<view class="signIn">
							<el-button type="primary" style="width: 100%;height: 100rpx;" @click="signIn">登录
							</el-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adminName: '',
				adminPassword: '',
				disabled: false,
				isAllowed: false,
				failMsg: '',
			};
		},
		methods: {
			//登陆成功弹窗
			openSuccessWindow() {
				this.$alert('登录成功', '提示', {
					confirmButtonText: '确定',
					callback: action => {
						uni.navigateTo({
							url: "Administrators"
						})

					},
					showClose: false,
				});
			},
			//登录方法
			async signIn() {
				if (this.adminName == '') {
					this.$alert('账号不能为空！', '错误', {
						confirmButtonText: '确定',

					});
				} else if (this.adminPassword == '') {
					this.$alert('密码不能为空', '错误', {
						confirmButtonText: '确定',

					});
				} else if (this.adminName != ''&&this.adminPassword != '') {
					await this.$axios({
						methods: 'get',

						url: '/Admin/Login?account=' + this.adminName + '&password=' + this.$md5(
							this.adminPassword),

					}).then(res => {
						this.judgeIsRight(res.data.date)
						if (this.isAllowed == true) {
							this.openSuccessWindow()
							this.$cookies.set("admin",this.adminName,"1h")
						}
					}).catch(err => {
					})
				}
			},

			//弹窗打开方法
			openWindow(msg) {
				this.$alert(msg, '登录失败', {
					confirmButtonText: '确定',
				});
			},
			//判断输入是否正确方法
			judgeIsRight(status) {
				if (status == true) {
					this.isAllowed = true
				} else {
					this.isAllowed = false
					this.failMsg = '您的账号或密码有误'
					this.openWindow(this.failMsg)
				}
			},
			//跳转到用户登录界面
			jumpToUserLogin() {
				uni.navigateTo({
					url: 'UserLoginIndex'
				});
			},
			//跳转到厂商登录界面
			jumpToShopLogin() {
				uni.navigateTo({
					url: 'ShopLoginIndex'
				});
			},
			// 跳转到主页
			jumpToMain(){
				uni.navigateTo({
					url: "Userindex"
				})
			}
		}
	};
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		float: left;
	}

	.header {
		width: 100%;
		height: 99rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}
	
	.logo {
		margin-left: 5%;
	}
	
	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}
	
	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	.name {
		font-size: 20px;
		position: absolute;
		transform: translateX(-1000rpx);
	}

	.pageTab {
		transform: translateX(1000rpx);
	}

	.content {
		width: 100%;
		height: 600px;
		display: flex;
		background-color: white;
		justify-content: center;
		flex-direction: row;
	}

	.image_container {
		width: 36%;
		display: flex;
	}

	.image_box {
		width: 50%;
		display: flex;
	}

	.image {
		margin-top: 130rpx;
		margin-left: -20rpx;
		width: 1100rpx;
		height: 900rpx;
		display: flex;
	}

	.login_container {
		width: 35%;
		display: flex;
	}

	.login_box {
		background-color: white;
		width: 86%;
		height: 400px;
		margin-top: 200rpx;
		border: 1px solid #EEEEEE;
		border-radius: 10px;
		transform: translateX(80rpx);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
	}

	.loginName {
		margin-top: 50rpx;
		width: 80%;
		margin-left: 10%;
		transform: translateX(-15rpx);
	}

	.login {
		width: 80%;
		margin-left: 10%;
		margin-top: 100rpx;
	}

	.userMobile {
		height: 150rpx;
	}

	.userPassword {
		height: 200rpx;
	}

	.tips {
		font-family: "Helvetica Neue", Helvetica, "PingFang SC";
		color: #909399;
		font-size: 12px;
	}

	/deep/ .el-input__inner {
		height: 50px;
	}

	.signIn {
		width: 100%;
	}
</style>
